<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>perkins</title>
  <link href='http://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
  <link href="stylesheets/app.less" media="all" rel="stylesheet/less" />
  <script src="javascripts/less-1.1.3.min.js"></script>
  <script charset="utf-8">
    //less.env = "development";
    //less.watch();
  </script>
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!--[if lt IE 7 ]>
    <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
    <script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
  <![endif]-->
</head>
<body>
  <header>
    <h1>Header</h1>
  </header>
  <article>
    <h3>Forms</h3>
    <p>Default Form</p>
    <ul class="form">
      <li><label>Label</label><input type="text"><span class="leftNote">This is a <strong>left</strong> note</span></li>
      <li><label>Label</label><input type="text"><span class="bottomNote">This is a <strong>buttom</strong> note</span></li>
      <li><label>Label</label><select><option></option></select></li>
      <li><label>Label</label><input type="radio"></li>
      <li><label>Label</label><input type="checkbox"></li>
      <li><label>This is a label that is long enough to go onto three lines</label><textarea cols="40" rows="5"></textarea></li>
    </ul>
    <br />
    <hr />
    <p>Default Form (label align right)</p>
    <ul class="form tar">
      <li><label>Label</label><input type="text"><span class="leftNote">This is a <strong>left</strong> note</span></li>
      <li><label>Label</label><input type="text"><span class="bottomNote">This is a <strong>buttom</strong> note</span></li>
      <li><label>Label</label><select><option></option></select></li>
      <li><label>Label</label><input type="radio"></li>
      <li><label>Label</label><input type="checkbox"></li>
      <li><label>This is a label that is long enough to go onto three lines</label><textarea cols="40" rows="5"></textarea></li>
    </ul>
    <br />
    <hr />
    <p>Vertical Form (modifier class="vvv")</p>
    <ul class="form vvv">
      <li><label>Label</label><input type="text"><span class="leftNote">This is a <strong>left</strong> note</span></li>
      <li><label>Label</label><input type="text"><span class="bottomNote">This is a <strong>buttom</strong> note</span></li>
      <li><label>Label</label><select><option></option></select></li>
      <li><label>Label</label><input type="radio"></li>
      <li><label>Label</label><input type="checkbox"></li>
      <li><label>This is a label that is long enough to go onto three lines</label><textarea cols="40" rows="5"></textarea></li>
    </ul>
    <br />
    <hr />
    <p>Vertical Form (modifier class="hvv")</p>
    <ul class="form hvv">
      <li><label>Label</label><input type="text"><span class="leftNote">This is a <strong>left</strong> note</span></li>
      <li><label>Label</label><input type="text"><span class="bottomNote">This is a <strong>buttom</strong> note</span></li>
      <li><label>Label</label><select><option></option></select></li>
      <li><label>Label</label><input type="radio"></li>
      <li><label>Label</label><input type="checkbox"></li>
      <li><label>This is a label that is long enough to go onto three lines</label><textarea cols="40" rows="5"></textarea></li>
    </ul>
    <br />
    <hr />
    <p>Vertical Form (modifier class="hhh")</p>
    <ul class="form hhh tar">
      <li><label>Label</label><input type="text"><span class="leftNote">This is a <strong>left</strong> note</span></li>
      <li><label>Label</label><input type="text"><span class="bottomNote">This is a <strong>buttom</strong> note</span></li>
      <li><label>Label</label><select><option></option></select></li>
      <li><label>Label</label><input type="radio"></li>
      <li><label>Label</label><input type="checkbox"></li>
      <li><label>This is a label that is long enough to go onto three lines</label><textarea cols="40" rows="5"></textarea></li>
    </ul>
    <br />
    <hr />
    <h3>Multiple Vertical Forms Horizontally aligned</h3>
    <ul class="h-multiForm">
      <li>
        <label>Form 1 modifier vhh</label>
        <ul class="form vhh">
          <li><label>label</label><select><option>label</option></select></li>
          <li><label>label</label><select><option>label</option></select></li>
          <li><label>label</label><select><option>label</option></select></li>
          <li><label>label</label><input type="text"></li>
          <li><label>label</label><input type="checkbox"></li>
        </ul>
      </li>
      <li>
        <label>Form 2 modifier vii</label>
        <ul class="form vii">
          <li><label>label</label><input type="text"></li>
          <li><label>label</label><input type="text"></li>
          <li><label>label</label><input type="text"></li>
          <li><label>label</label><input type="text"></li>
          <li><label>label</label><input type="text"></li>
        </ul>
      </li>
      <li>
        <label>Form 3 modifier hvv</label>
        <ul class="form hvv">
          <li><label>Label</label><input type="text"></li>
          <li><label>Label</label><input type="text"></li>
          <li><label>Label</label><select><option></option></select></li>
          <li><label>Label</label><input type="radio"></li>
          <li><label>Label</label><input type="checkbox"></li>
          <li><label>Textarea</label><textarea></textarea></li>
        </ul>
      </li>
    </ul>
    <br />
    <hr />
    <ul class="h-multiForm"> 
        <li>
        <label>FORM 1: <br><em>modifier class = "hvv"</em></label>
            <ul class="form hvv">
                <li><label>label</label><input type="checkbox"></li>
                <li><label>Long label within a horizontal form</label><select><option>label</option></select></li>
                <li><label>label</label><input type="text"></li>
                <li><label>label</label><input type="text"></li>

            </ul>
       </li>
        <li>
        <label>FORM 2: <br><em>modifier class = "hii"</em></label>
            <ul class="form hii">
                <li><label>label</label><input type="checkbox"></li>
                <li><label>label</label><select><option>label</option></select></li>
                <li>
                  <label>label</label>
                  <input type="text"></li>
                <li><label>label</label><input type="text"></li>
             </ul>
       </li>
        <li>
         <label>FORM 3: <br><em>modifer class = "hhh"</em></label>
            <ul class="form hhh">
                <li><label>label</label><input type="checkbox"></li>
                <li><label>label</label><select><option>label</option></select></li>
                <li><label>label</label><input type="text"><span class="bottomNote offset2">this is a note</span></li>
                <li><label>label</label><input type="text"></li>

            </ul>
       </li>
    </ul>
    <br />
    <hr />
    <h3>Multi Select Box</h3>
    <ul class="h-multiForm">

        <li>
        <label>Hey, this is a multi select box <br><em>Modifier class = "vhh"</em></label>
        <div class="multiSelect"> 

             <ul class="form vhh ">
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label label label label label label </label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label label label label label label label label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
            </ul>
        </div>
        </li>

        <li>
         <label>So Is this <br><em>Modifier class = "vii"</em></label>
        <div class="multiSelect">
             <ul class="form vii ">
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label label label label label label label label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>Tes fds fds fds fsdfdsfds fsfdsfdsf ds dst</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
                <li class="required"><input type="checkbox"><label>label</label></li>
                <li><input type="checkbox"><label>label</label></li>
            </ul>
        </div>
        </li>


        </ul>
  </article>
  <aside>
    <h3>Sidebar</h3>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </aside>
</body>
</html>

